const CompressionPlugin = require('compression-webpack-plugin');

// 配置自适应插件
// const px2rem = require('postcss-px2rem');
// // 配置基本大小  和rem.js 配置一样
// const postcss = px2rem({
//     remUnit: 192,
//     exclude: '/views/login.less',
// });

module.exports = {
    // publicPath: '/back/',
    devServer: {
        host: '0.0.0.0',
        port: 61030,
        proxy: {
            '/xboot': {
                target: 'http://hnbys.tech/',
                // target: 'http://192.168.3.84:8080',
                // target: 'http://192.168.3.71:8080',
                // target: 'http://192.168.31.178:8080',
                // target: 'http://10.201.84.2:8081',
                // target: 'http://116.204.126.39:8080', /*/*/ // 请求本地 需要xboot后端项目
                //  target:'http://10.2.1.116:61029',//lcy
                // target: 'http://localhost:8080', // 请求本地 需要xboot后端项目
                // target: 'http://www.bys.cn',
                ws: true
            },
            '/foo': {
                target: '<other_url>'
            }
        }  
    },
    // 打包时不生成.map文件 避免看到源码
    productionSourceMap: false,
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,

        // css预设器配置项
        loaderOptions: {
            less: {
                lessOptions: {
                    javascriptEnabled: true
                }
            },
            postcss: {
                // plugins: [postcss]
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 192,
                        propList: ['*','!border'],
                        // selectorBlackList: ['.ivu-table'] // 过滤掉.am-开头的class，不进行rem转换
                    })
                ]
                
                // plugins: [
                
                
                // require('postcss-px-to-viewport')({
                //     unitToConvert: 'px', // 需要转换的单位
                //     viewportWidth: 1920,    // 视口宽度，等同于设计稿宽度
                //     unitPrecision: 6,      // 精确到小数点后几位
                //     /**
                //     * 将会被转换的css属性列表，
                //     * 设置为 * 表示全部，如：['*']
                //     * 在属性的前面或后面设置*，如：['*position*']，*position* 表示所有包含 position 的属性，如 background-position-y
                //     * 设置为 !xx 表示不匹配xx的那些属性，如：['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
                //     * 还可以同时使用 ! 和 * ，如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
                //     * */
                //     propList: ['*'],
                //     viewportUnit: 'vw',    // 需要转换成为的单位
                //     fontViewportUnit: 'vw',// 需要转换称为的字体单位
                //     /**
                //     * 需要忽略的选择器，即这些选择器对应的属性值不做单位转换
                //     * 设置为字符串，转换器在做转换时会忽略那些选择器中包含该字符串的选择器，如：['body']会匹配到 .body-class，也就意味着.body-class对应的样式设置不会被转换
                //     * 设置为正则表达式，在做转换前会先校验选择器是否匹配该正则，如果匹配，则不进行转换，如[/^body$/]会匹配到 body 但是不会匹配到 .body
                //     */
                //     selectorBlackList: [],
                //     minPixelValue: 1,      // 最小的像素单位值
                //     mediaQuery: false,     // 是否转换媒体查询中设置的属性值
                //     replace: true,         // 替换包含vw的规则，而不是添加回退
                //     /**
                //     * 忽略一些文件，如'node_modules'
                //     * 设置为正则表达式，将会忽略匹配该正则的所有文件
                //     * 如果设置为数组，那么该数组内的元素都必须是正则表达式
                //     */

                //     filter: (node) => {
                //     // 检查节点的 selector
                //         if (node.selector.indexOf('.ivu') !== -1) {
                //             return false; // 返回 false 表示排除这个规则
                //         }
                //         return true; // 其他规则返回 true，表示进行转换
                //     },
                //     exclude: [/node_modules/],
                //     landscape: false,      // 是否自动加入 @media (orientation: landscape)，其中的属性值是通过横屏宽度来转换的
                //     landscapeUnit: 'vw',   // 横屏单位
                //     landscapeWidth: true   // 横屏宽度
                // })
                // ]
            }
        },
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // 部署优化
    configureWebpack: {
        // 使用CDN
        externals: {
            vue: 'Vue',
            'vue-i18n': 'VueI18n',
            axios: 'axios',
            'vue-router': 'VueRouter',
            vuex: 'Vuex',
            'view-design': 'iview',
            echarts: 'echarts',
            apexcharts: 'ApexCharts',
            'vue-apexcharts': 'VueApexCharts',
            xlsx: 'XLSX',
            dplayer: 'DPlayer',
            'print-js': 'printJS',
            html2canvas: 'html2canvas',
            'vue-json-pretty': 'VueJsonPretty',
            'vue-lazyload': 'VueLazyload',
            gitalk: 'Gitalk',
            'js-cookie': 'Cookies',
            wangEditor: 'wangEditor',
            quill: 'Quill',
            stompjs: 'Stomp',
            'sockjs-client': 'SockJS',
            vuedraggable: 'vuedraggable',
            viewerjs: 'Viewer'
        },
        plugins: [
            // GZIP压缩
            new CompressionPlugin({
                test: /\.js$|\.html$|\.css/, // 匹配文件
                threshold: 10240 // 对超过10k文件压缩
            })
        ],
       
    }
};
